import { Element } from 'slate'

function titleBlackToHtml(elem: Element, childrenHtml: string): string {
    const title = (elem as any).title || ''
    const description = (elem as any).description || ''
    const imageUrl = (elem as any).imageUrl || ''
    const linkUrl = (elem as any).linkUrl || ''
    const serviceName = (elem as any).serviceName || 'Immediate Hiring'
    const jobNature = (elem as any).jobNature || 'Part-Time / Full-Time'
    const salaryRange = (elem as any).salaryRange || 'Up to $39 per hour'

    const imageHtml = imageUrl ? `
        <div style="flex-shrink: 0; width: 120px; height: 120px; border-radius: 8px; overflow: hidden; background-color: #f0f0f0;">
            <img src="${imageUrl}" alt="Job posting image" style="width: 100%; height: 100% !important; object-fit: cover;" onerror="this.style.display='none'">
        </div>
    ` : ''

    const buttonHtml = linkUrl ? `
        <button onclick="window.open('${linkUrl}', '_blank')" style="background-color: #007bff; color: white; border: none; border-radius: 4px; padding: 10px 20px; font-size: 14px; font-weight: bold; cursor: pointer; transition: background-color 0.2s;">Search information
</button>
    ` : `
        <button style="background-color: #007bff; color: white; border: none; border-radius: 4px; padding: 10px 20px; font-size: 14px; font-weight: bold; cursor: pointer; transition: background-color 0.2s;">Search information</button>
    `

    return `<div data-w-e-type="title-black" 
    style="background-color: #f9fafb; padding: 20px; margin: 16px 0; cursor: default; user-select: none; position: relative; max-width: 100%; font-family: Arial, Helvetica, sans-serif; color: #000000; display: flex; gap: 20px; align-items: flex-start;">
        ${imageHtml}
        <div style="flex: 1; min-width: 0;">
            <div style="font-size: 18px; font-weight: normal; color: #000000; margin: 0 0 12px 0;">${title}</div>
            <p style="font-size: 16px; color: #000000; margin: 0 0 16px 0; line-height: 1.5; font-weight: normal;">${description}</p>
            <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 12px; flex-wrap: wrap;">
                <div style="display: flex; align-items: center; gap: 4px;">
                    <span style="font-size: 12px;">🕐</span>
                    <span>${serviceName}</span>
                </div>
                <span style="color: #ccc;">|</span>
                <div style="display: flex; align-items: center; gap: 4px;">
                    <span style="font-size: 12px;">💻</span>
                    <span>${jobNature}</span>
                </div>
                <span style="color: #ccc;">|</span>
                <div style="display: flex; align-items: center; gap: 4px;">
                    <span style="font-size: 12px;">💰</span>
                    <span>${salaryRange}</span>
                </div>
            </div>
            ${buttonHtml}
        </div>
    </div>`
}

export const elemToHtmlConf = {
    type: 'title-black',
    elemToHtml: titleBlackToHtml
} 